<script type="text/javascript">
var enable_submit = true;

function submit_host_add(firstval) {
  isforce = false;
  $(".rtn-tip").slideUp('fast');
  if ($("#host_add_modal").find(".detail").length <= 0) {
    $(".rtn-tip").text("请至少添加一个节点").slideDown('fast');
    return;
  }
  toggleErrorTip();
  var ips = ''
  var pwds = '';
  var ipInputs = $("#host_add_modal").find("input[itype=ip]");
  var pwdInputs = $("#host_add_modal").find("input[itype=password]");
  var reg = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/i;
  for (var i = 0; i < ipInputs.length; i++) {
    var $ipInput = $(ipInputs[i]);
    var ipVal = $.trim($ipInput.val());
    if (ipVal.length <= 0) {
      toggleErrorTip($ipInput, 'IP地址不能为空。');
      return;
    }
    if (!reg.test(ipVal)) {
      toggleErrorTip($ipInput, 'IP地址格式错误。');
      return;
    }
    var subIps = ipVal.split('.');
    for (var j in subIps) {
      if (subIps[j] > 255 || subIps[j] < 0) {
        toggleErrorTip($ipInput, 'IP地址格式错误。');
        return;
      }
    }
    ips += ipVal + ',';
  }
  for (var i = 0; i < pwdInputs.length; i++) {
    var $pwdInput = $(pwdInputs[i]);
    var pwdVal = $.trim($pwdInput.val());
    if (pwdVal.length <= 0) {
      toggleErrorTip($pwdInput, '密码不能为空。');
      return;
    }
    pwds += pwdVal + ' ';
  }
  /*var reg = /^\d{1,3}/i;
  for(var i = 0; i < ipInputs.length; i++) {
      var $ipInput = $(ipInputs[i]);
      var subVal = $ipInput.val();
      if($.trim(subVal).length <= 0 || !reg.test($.trim(subVal)) || parseInt($.trim(subVal)) > 255 ) {
          toggleErrorTip($ipInput, 'IP地址格式不正确。');
          return ;
      }
      if( i > 0 && i % 4 != 0) {
          temp_ip += subVal;
          if( (i + 1) % 4 != 0) {
              temp_ip += '.';
          } else {
              ips += temp_ip + ',';
              temp_ip = '';
          }
      } else {
          temp_ip += subVal + '.';
      }
  }
  for(var i = 0; i < pwdInputs.length; i++) {
      var $pwdInput = $(pwdInputs[i]);
      var pwdVal = $pwdInput.val();
      if(!pwdVal) {
          toggleErrorTip($pwdInput, '密码不能为空。');
          return ;
      }
      pwds += pwdVal + " ";
  }*/
  if (enable_submit) {
    enable_submit = false;
    var $submitBtn = $('.modal-footer').find('.btn-blue');
    $submitBtn.html('<i class="fa fa-spinner fa-spin" style="margin:3px 6px;"></i>');
    $('.rtn-tip').slideUp('fast');
    $.post('/host/add', {
        'name': '',
        'ip': ips,
        'password': pwds,
        'is_force': isforce,
        'vip': firstval.vip,
        'network': firstval.NetWork,
        'netmask': firstval.NetMask,
        'nohosts': firstval.nohosts,
      },
      function(data) {
        if (data.reply.is_success) {
          angular.element('#host_add').scope().close();
          $('#tb_node_mng').trigger("reloadGrid");
        } else {
          error = data.reply.error;
          $('.rtn-tip').text(error).slideDown('fast');
          $submitBtn.html(SelfTranslate("[[ 'label ok'|translate ]]"));
          enable_submit = true;
        }


      });
  }
}

function toggleErrorTip(el, text) {
  var $etip = $('.error-tip');
  var nowTop = $etip[0].offsetTop;
  if (nowTop > -5555) {
    $etip.css({
      'top': '-9999px',
      'left': '-9999px'
    });
    return;
  }
  if (el) {
    var $parent = el.parent().parent();
    var ftop = ($parent[0].offsetTop - 40) + 'px';
    var fleft = ($parent[0].offsetLeft + 45) + 'px';
    $etip.find('p').text(text);
    $etip.css({
      'top': ftop,
      'left': fleft
    });
  }


}

function arbitor_confim() {
  $('#arbitor_confirm_').dialog("open");
  $('#arbitor_confirm_').load("/arbitor_confirm");
}
$(function() {
  $('#node_add_btn').on('click', function() {
    var html = '';
    var $box = $('#host_add_modal').find('.content');
    var htmlArr = ['<div class="detail">',
      '<div class="detail-key">',
      '<div class="input-box">',
      '<input type="text" itype="ip" class="node-input" />',
      '</div>',
      '</div>',
      '<div class="detail-value">',
      '<div class="input-box">',
      '<input type="password" itype="password" />',
      '<i class="fa fa-eye"></i>',
      '<a href="javascript:void(0);">删除</a>',
      '</div>',
      '</div>',
      '</div>'
    ];
    html += htmlArr.join('');
    $box.append(html);
  });

  $("#host_add_modal").delegate('.detail a', "click", function() {
    $(this).parent().parent().parent().remove();
  });

  $('#host_add_modal').delegate('.detail input', 'focus', function() {
    $(this).parent().css('border-color', '#5485fe');
  });

  $('#host_add_modal').delegate('.detail input', 'blur', function() {
    $(this).parent().css('border-color', '#ddd');
  });

  $('#host_add_modal').delegate('.detail i', 'click', function() {
    if ($(this).hasClass('showpwd')) {
      $(this).removeClass('showpwd');
      $(this).siblings('input[type=text]').attr('type', 'password');
    } else {
      $(this).addClass('showpwd');
      $(this).siblings('input[type=password]').attr('type', 'text');
    }
  });

  /*$('#host_add_modal').delegate('input[itype=ip]', 'keyup', function(e) {
      var $input = $(this);
      var $input = $(this);
      if ($input.val().length == 3) {
          var value = $input.val();
          var reg = /^[0-9]*$/;
          var $tip = $('#host_add_modal').find('.tip');
          var $el = $input.parent();
          var top = $el[0].offsetTop;
          var left = $el[0].offsetLeft;
          if (value > 255) {
              $tip.find('p').text('数字不能大于255');
              $tip.css({
                  'top': (top - $tip[0].offsetHeight - 10) + 'px',
                  'left': left + 'px'
              });
              return;
          }
          if (value.match(reg)) {
              $input.next().next().trigger('focus');
              $tip.css({
                  'top': '-5000px',
                  'left': '-5000px'
              });
          } else {
              $tip.find('p').text('必须是纯数字');
              $tip.css({
                  'top': (top - $tip[0].offsetHeight - 10) + 'px',
                  'left': left + 'px'
              });
          }
      }
  });*/
});
</script>
<div class="modal-header">
  <h3>[['Add host'|translate]]</h3>
</div>
<div class="modal-body" id="host_add_modal" style="overflow-y: auto;">
  <div class="add-host">
    <div class="title">
      <p>添加新的节点</p>
      <div class="split-line"></div>
      <div class="operate-btn">
        <button type="button" class="btn btn-blue btn-xs" id="node_add_btn"><i class="fa fa-plus"></i>添加</button>
      </div>
    </div>
    <div class="key-value">
      <div class="key">节点IP</div>
      <div class="value">密码</div>
    </div>
    <div class="content">
      <input type="text" style="display:none">
      <input type="password" style="display:none">
      <div class="rtn-tip"></div>
      <div class="detail">
        <div class="detail-key">
          <div class="input-box">
            <input type="text" itype="ip">
          </div>
          <!--<div class="input-grp">
                        &lt;!&ndash;<input type="text" itype="ip" class="node-input" /><span>.</span>
                        <input type="text" itype="ip" class="node-input" /><span>.</span>
                        <input type="text" itype="ip" class="node-input" /><span>.</span>
                        <input type="text" itype="ip" class="node-input" />&ndash;&gt;
                    </div>-->
        </div>
        <div class="detail-value">
          <div class="input-box">
            <input type="password" itype="password" />
            <i class="fa fa-eye"></i>
            <a href="javascript:void(0)">删除</a>
          </div>
        </div>
      </div>
    </div>
    <div class="error-tip">
      <p></p><span></span>
    </div>
  </div>
</div>
</div>
<div class="modal-footer">
  <button class="btn btn-blue" ng-show="item.showConfigBtn"  ng-click="goto_config()">上一步</button>
  <button class="btn btn-blue" ng-click="ok()">[[ 'label ok'|translate ]]</button>
  <button class="btn btn-white" ng-click="cancel()">[[ 'label cancel'|translate ]]</button>
</div>
